<template>
	<section>
		<!--高级查询表单-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="query">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="pageInfo.rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="名称" width="120" sortable>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="180" sortable>
			</el-table-column>
			<el-table-column prop="updateTime" label="修改时间" width="180" sortable>
			</el-table-column>
			<el-table-column prop="manager.username" label="部门经理" width="120" sortable>
			</el-table-column>
			<el-table-column prop="parent.name" label="父部门" min-width="120" sortable>
			</el-table-column>
      <el-table-column prop="path" label="部门路径" min-width="120" sortable>
      </el-table-column>
      <el-table-column prop="state" label="状态" min-width="80" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.state == 1" style="color: green">启用</span>
          <span v-else style="color: red;">禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="描述" min-width="180" sortable>
      </el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <!--分页条
      total 就是当前满足条件的总条数
      @current-change="handleCurrentChange"  当当前页发生改变时会触发handleCurrentChange()
      -->
			<el-pagination layout="sizes,prev, pager, next"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :page-size="query.pageSize"
                     :page-sizes="[10, 20, 30, 40]"
                     :current-page="query.currentPage"
                     :total="pageInfo.total"
                     style="float:right;">
			</el-pagination>
		</el-col>

		<!--
		新增/修改界面
		v-model="saveFormVisible" 用来控制弹框是否展示,这是老版本的用法,新版本要使用:visible.sync=
		-->
		<el-dialog title="新增/修改" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <!--
      :rules 这是表单的规则
      ref="saveForm"  类似于给表单取一个名字
      -->
			<el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
        <!--prop="name" 引用saveFormRules规则中的 name规则-->
				<el-form-item label="名称" prop="name">
					<el-input v-model="saveForm.name" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="部门经理">
          <!--label option下拉框选项用来展示给用户看的信息
          当选中某一项以后,需要将选中的员工的id提交给后端,所以value:取员工的id-->
          <el-select v-model="saveForm.manager.id" placeholder="请选择">
            <el-option
                v-for="item in employees"
                :key="item.id"
                :label="item.username"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父部门">
          <!--<el-input v-model="saveForm.parent.id" auto-complete="off"></el-input>-->
          <el-cascader v-model="saveForm.parent"
                       :options="deptTree"
                       :props="{
							   checkStrictly: true,
							   label:'name',
							   value:'id'
							}"
                       clearable></el-cascader>
        </el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="saveForm.state">
						<el-radio class="radio" :label="1">正常</el-radio>
						<el-radio class="radio" :label="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="描述">
					<el-input type="textarea" v-model="saveForm.intro"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="saveFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="save" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				filters: {
					name: ''
				},
				pageInfo:{
          rows: [],
          total: 0,
        },
				page: 1,
				listLoading: false,
				sels: [],//列表选中列

				saveFormVisible: false,//新增界面是否显示
				addLoading: false,
				saveFormRules: {
					name: [
						{ required: true, message: '请输入名称', trigger: 'blur' }
					]
				},
				//新增界面数据
				saveForm: {
				  id:null,
					name: '',
					intro:"",
          manager:{
				    id:null
          },
          parent:{
				    id:null
          },
          state:null
				},
        employees:[],   // 用来展示select下拉框的
        deptTree:[],    // 用来展示父部门级联下拉框的
        query:{
				  // 查询对象,包括分页条件和高级查询条件
          currentPage:1,  // 当前页,默认是查询第一页
          pageSize:10,    // 每页显示条数,默认是10条,当你第一次访问这个页面时,需要查第几页,每页几条
          keyword:""
        }
			}
		},
		methods: {
		  // 当每页显示条数的值被改变时会触发的
      handleSizeChange(val){
        console.log("每页显示条数",val);
        this.query.pageSize = val;
        this.getDepartments();
      },
      search(){
          // 当 点击"查询"按钮时,要从第一页开始查询
          this.query.currentPage = 1;
          // 调用getDepartment方法查询数据
          this.getDepartments();
      },
		  // 就是当 当前页发生改变时就触发该方法
			handleCurrentChange(val) {
			    // val它就是当前要访问的那个页码,当它发生改变时,需要修改query对象中的currentPage,只有当它发生改变,调到后端时,后端的currentPage才会拿到新的页码
			    this.query.currentPage = val;
			    // 重新调用getDepartment(),重新从后端获取数据渲染页面
          this.getDepartments();
			},
			//获取部门列表
      getDepartments() {
        console.log(this.query)
			    // 根据分页条件和高级查询条件,调用后端分页接口,url这个地方,如果你前面什么都不加,直接写/department的话,它认为你是要在当前项目下去访问/department
        // axios.defaults.baseURL = "/api" 如果main.js配置过统一前缀,那么在发起请求时,它会默认在url前加上那个前缀,就当前与 /api+/department
				  this.$http.post("/department",this.query)
              .then(result => {
                  result = result.data;
                  console.log(result);  // 后端返回的resultObj里面,包含rows(当前页数据) total 总条数
                  this.pageInfo = result.resultObj;
              })
              .catch(result => {
                this.$message({
                  message: '网络错误!',
                  type: 'error'
                });
              })
			},
			//删除  index:要删除的数据所在下标  row:要删除的数据,当前行数据对象
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;  // 弹出加载框
					// 如果确认删除,要调用后端删除接口
          this.$http.delete("/department/"+row.id)
              .then(result => {
                  // 关闭加载框
                  this.listLoading = false;
                  // 进入then说明当前调用成功
                  result = result.data; // 删除接口,后端会返回{success:true/false,message:""}
                  if(result.success){
                    this.$message({
                      message: '删除成功!',
                      type: 'success'
                    });
                    // 删除成功以后,需要重新调用查询接口渲染页面,注意:要从第一页开始重新查询数据,否则会有bug
                    this.query.currentPage = 1;
                    this.getDepartments();
                  }else{
                    this.$message({
                      message: '删除失败!',
                      type: 'error'
                    });
                  }
              })
              .catch(result => {
                this.$message({
                  message: '网络错误!',
                  type: 'error'
                });
              })
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
        // 弹出弹框
				this.saveFormVisible = true;
				// 将当前行对象赋值给this.saveForm,用来做回显的
				this.saveForm = Object.assign({}, row);
				// 如果该部门没有父部门,要给它的父部门对象设置一个{id:null},否则在回显时会报错
				if(!this.saveForm.parent){
				  // this.saveForm.parent为false,就说明当前部门没有父部门
				  this.saveForm.parent = {
				    id:null
          }
        }else{
				  // 如果没有父部门,是不需要处理的
          // 做父部门回显,通过path得到一个数组,数组包括[父部门的父部门的id,父部门的id]
          var path = row.path;  // /1/2/20
          var idArray = path.split("/");  // 通过/进行分割  分割完成以后:['', '1', '2', '20']
          var temp = [];
          for(var i=1;i<idArray.length-1;i++){  // 第一个元素是一个空字符串,不要,最后一个id是自己本身的id,也不要,只需要父部门他们的id就可以了
            temp.push(parseInt(idArray[i]));  // 经过字符串分割以后,得到的元素是字符串,而后端返回的部门id是数字类型,所以需要转换一下
          }
          this.saveForm.parent = temp;
        }
        if(!this.saveForm.manager){
          this.saveForm.manager = {
            id:null
          }
        }
        // 调用获取所有员工的方法,渲染 部门经理下拉框
        this.getAllEmployee();
        // 调用查询部门树方法,渲染父部门级联下拉框
        this.getDeptTree();
			},
			//显示新增界面
			handleAdd: function () {
        // 弹出新增的弹框
				this.saveFormVisible = true;
				// 给saveForm对象赋初始值,为了防止第二次将上一次的带过来,注意:要和data中定义的字段保持一致
				this.saveForm = {
          id:null,
          name: '',
          intro:"",
          manager:{
            id:null
          },
          parent:{
            id:null
          },
          state:null
				};
				// 获取所有的员工信息,渲染部门经理下拉框
        this.getAllEmployee();
        // 查询部门树,用来渲染父部门下拉框
        this.getDeptTree();
			},
      getAllEmployee(){
        this.$http.get("/employee")
            .then(result => {
              result = result.data;
              console.log(result)
              // 将获取到的所有的员工信息,赋值给this.employees,因为要来渲染部门经理下拉框的
              this.employees = result.resultObj;
            })
      },
      getDeptTree(){
        this.$http.get("/department/tree")
            .then(result => {
              result = result.data;
              console.log(result)
              // 将后端返回的结果赋值给deptTree,用来渲染级联下拉框的
              this.deptTree = result.resultObj;
            })
      },
			//新增
			save: function () {
        // this.$refs.saveForm.validate((valid) => { 校验表单是否满足校验规则    valid是校验后的结果  true说明校验通过  false说明校验未通过
				this.$refs.saveForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true; // 加载框
              // 级联下拉框它被选中后的值是一个数组,它包括它这个路径上所有层级的id,所以要在请求到后端接口前,对saveForm.parent做处理
              // 因为现在我们拿到的saveForm.parent是个数组,跟后端需要的类型不一样
              let array = this.saveForm.parent;  // [1,4]
              if(array && array.length > 0){ // 如果当前新增/修改的是一个一级部门,它是没有父部门的
                this.saveForm.parent = {id:array[array.length-1]}; // 将数组转为一个对象,id的值取数组中最后一个
              }else{
                this.saveForm.parent = {id:null};
              }
              console.log(this.saveForm)
							this.$http.put("/department",this.saveForm)
                  .then(result => {
                      result = result.data;
                      this.addLoading = false;
                      if(result.success){
                        this.$message({
                          message: '操作成功!',
                          type: 'success'
                        });
                        // 关闭弹框
                        this.saveFormVisible = false;
                        // 重新加载数据
                        this.getDepartments();
                      }else{
                        this.$message({
                          message: result.message,
                          type: 'error'
                        });
                      }
                      console.log(result)
                  })
                  .catch(result => {
                    this.$message({
                      message: '网络错误!',
                      type: 'error'
                    });
                  })
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
        // this.sels 当前被勾选中的所有的数据
				var ids = this.sels.map(item => item.id);  // 获取所有被勾选中的行的id
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					// 如果确认要删除,调用后端的批量删除接口
          this.$http.patch("/department",ids)
              .then(result => {
                  // 关闭加载框
                  this.listLoading = false; // 因为就算是删除失败也要关闭加载框
                  console.log("批量删除结果打印",result);
                  result = result.data; // 后端返回的结果是封装到result.data属性中的
                  console.log("批量删除后端返回的结果",result)
                  if(result.success){
                    this.$message({
                      message: '删除成功!',
                      type: 'success'
                    });
                    // 删除成功,从第一页开始重新查询数据
                    this.query.currentPage = 1;
                    this.getDepartments();
                  }else{
                    this.$message({
                      message: '删除失败!',
                      type: 'error'
                    });
                  }
              })
              .catch(result => {
                this.$message({
                  message: '网络错误!',
                  type: 'error'
                });
              })
				}).catch(() => {

				});
			}
		},
		mounted() {
		  // 页面加载完毕,调用部门的分页接口,获取数据渲染页面
			this.getDepartments();
		}
	}

</script>

<style scoped>

</style>